<template>
<div>
  <van-nav-bar
  title="黑马头条-登入"
/>
<van-form @submit="onSubmit">
  <van-field
    v-model="formLogin.mobile"
    name="手机号"
    label="手机号"
    placeholder="请输入手机号"
    :rules="[{ pattern:/^1[3456789]\d{9}$/ ,trigger:'onChange', required: true, message: '请输入正确的手机号哦~~' }]"
  />
  <van-field
    v-model="formLogin.code"
    type="password"
    name="密码"
    label="密码"
    placeholder="请输入密码"
    :rules="[{ pattern:/^\d{6}$/,trigger:'onChange', required: true, message: '请填写正确的密码格式哦' }]"
  />
  <div style="margin: 16px;">
    <van-button
    round
    block
    type="info"
    native-type="submit"
    :loading="isLoading"
    :disabled="isLoading"
     loading-text="程序员拼命加载ing..."
    >提交</van-button>
  </div>
</van-form>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  data () {
    return {
      formLogin: {
        mobile: '13888888888',
        code: '246810'
      },
      isLoading: false
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']),
    async onSubmit () {
      this.isLoading = true
      try {
        await this.asyncLoginAction(this.formLogin)
        Notify({ type: 'success', message: '登录成功' })
        this.isLoading = false
        this.$router.replace('/layout')
      } catch (err) {
        console.error(err)
        this.isLoading = false
        Notify({ type: 'warning', message: '手机号或密码错误' })
      }
    }
  },
  name: 'Login'
}
</script>
<style lang="less" scoped>
// .van-nav-bar{
//   background-color: aquamarine;

// }
// /deep/ .van-nav-bar__title{
//   color: #fff;
// }
</style>
